<template>
  <div>
  <el-dialog
    :title="title"
    :visible.sync="isVisible"
    :width="width"
    :before-close="handleClose"
    :lock-scroll="true"
    :close-on-click-modal="false"
    custom-class="pub_dialog"
    @open="getData"
  >
    <!-- <div style="font-size:16px; font-weight:600; border-bottom: 1px solid #f1f1f1;padding-bottom: 10px">基本信息</div>
    <VForm
      ref="vformComponents"
      :form="formData.form"
      :options="formData.options"
      :rules="formData.rules"
      :labelWidth="formData.labelWidth"
      :rowspan="rowspan"
      @toLoadMethods="toLoadMethods"
    ></VForm> -->

    <!-- <div style="font-size:16px; font-weight:600; border-bottom: 1px solid #f1f1f1;padding-bottom: 10px">辅助信息</div> -->

    <!-- <VForm
      ref="vformComponents2"
      :form="formData2.form"
      :options="formData2.options"
      :rules="formData2.rules"
      :labelWidth="formData2.labelWidth"
      :rowspan="rowspan"
    ></VForm> -->

     <tinymce v-model="formData2.form.reportContent" :height="300" />


    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">{{openType!='detail' ? '取 消':'返 回'}}</el-button>
      <el-button type="primary" @click="sure" v-if="openType!='detail'">确 定</el-button>
    </span>
  </el-dialog>
    <!--指标树弹框-->
    <TargetDialog
      :dialog-visible="targetDialogShow"
      @close="targetEditClose"
      @success="targetEditSuccess"
      :title="targetTitle"
      :year="formData.form.year"
      openType="policyMake"
    ></TargetDialog>
  </div>
</template>

<script>
  import { cityPolicyMakeDetail,
    cityPolicyMakeUpdate,
    cityPolicyMakeAdd} from '@/api/risk/cityWaringResult'
  import VForm from "@/components/VForm/index";
  import TargetDialog from '@/views/xy/public/cityAnalysis/components/targetDialog'
  import Tinymce from '@/components/Tinymce/tinymce.vue'
  export default {
    components: {
      VForm, TargetDialog,Tinymce
    },
    props: {
      width: {
        type: String,
        default: "70%",
      },
      title: {
        type: String,
        default: "详情",
      },
      id:{},
      openType:{
        type:String,
        default:"add"
      },
      dialogVisible: {
        type: Boolean,
        default: false
      },
      cityList:{}
    },
    watch: {
      'width': {
        handler(newVal, oldVal) {
          console.log('newVal===',newVal, oldVal)
          let w = this.width.split('%')[0]
          if(w>=60){
            this.rowspan = 2
          }else{
            this.rowspan = 1
          }
        },
        deep: true,
        immediate: true
      },
      'cityList':{
        handler(newVal, oldVal) {
          this.formData.options.forEach(t=>{
            if(t.key=='cityCode'){
              t.option.data = newVal
            }
          })
        },
        deep: true,
        immediate: true
      },
      'openType':{
        handler(newVal, oldVal) {
          // 判断是否详情，添加不可编辑标识
          this.formData.options.forEach(t=>{
            t.disabled = newVal=='detail' ? true : false
          })
        },
        deep: true,
        immediate: true
      }
    },
    computed: {
      isVisible: {
        get() {
          return this.dialogVisible
        },
        set() {
          this.close()
        }
      }
    },
    data() {
      return {
        rowspan:1,
        dict:{},
        formData2: {
          form: {
            reportContent:"",
            remark:""
          },
          options: [
            {
              title: "报告内容",
              key: "reportContent",
              type: "textarea",
              columnWidth:'w100'
            },
            {
              title: "备注",
              key: "remark",
              type: "textarea",
              columnWidth:'w100'
            },
          ],
          rules: {
            reportContent :[
              { required: true, message: '请输入', trigger: 'blur' },
              // {max:1024, message: '长度最大为1024个字符', trigger: 'blur'}
            ],
            remark :[
              {max:128, message: '长度最大为128个字符', trigger: 'blur'}
            ],
          },
          labelWidth: "140px",
        },
        formData: {
          form: {
            reportName:"",
            year:"",
            cityName:"",
            cityCode:"",
            targetNo:"",
            targetName:"",
            file:[],
          },
          options: [
            {
              title: "报告名称",
              key: "reportName",
              type: "text",
            },
            {
              title: "指标年份",
              key: "year",
              type: "dateYear",
            },
            {
              title: "城市",
              key: "cityCode",
              type: "select",
              multiple:false,
              option: {
                data: this.cityList,
                props: {
                  key: "areaCode", // 指定key对应data的字段
                  label: "areaName", // 指定label对应data的字段
                  value: "areaCode", // 指定value对应data的字段
                },
              },
              event:"selectCity"
            },
            {
              title: "涉及指标",
              key: "targetName",
              type: "clickText",
              event:"openTreeDialog"
            },
            {
              title: "附件",
              key: "file",
              type: "file",
              fileType:"file",
              listType:"text",
              uploadTextTip:"",
            },
          ],
          rules: {
            reportName :[
              { required: true, message: '请输入', trigger: 'blur' },
              {max:64, message: '长度最大为64个字符', trigger: 'blur'}
            ],
            year :[
              { required: true, message: '请选择', trigger: 'change' },
            ],
            cityCode :[
              { required: true, message: '请选择', trigger: 'change' },
            ],
          },
          labelWidth: "140px",
        },
        // 字典
        typeOptions:[],
        targetDialogShow:false,
        targetTitle:"选择体检指标",
        content:''
      };
    },
    methods: {
      targetEditClose(){
        this.targetDialogShow =false
      },
      targetEditSuccess(data){
        console.log("获取值",data)
        this.formData.form.targetNo = data.map(t=>{return t.threeTargetNo}).join(",")
        this.formData.form.targetName = data.map(t=>{return t.threeTargetName}).join(",")
        this.targetEditClose()
      },
      toLoadMethods(methods) {
        this[methods]()
      },
      openTreeDialog(){
        if(this.formData.form.year==''){
            this.$message.warning("请先选择年份")
            return
        }
        this.targetDialogShow = true
        console.log("打开弹框===========>")
      },
      selectCity(){
        let cityCode = this.formData.form.cityCode
        if(cityCode){
            let city = this.cityList.find(t=> t.areaCode == cityCode)
            if(city!=undefined){
               this.formData.form.cityName = city.areaName
            }
            return;
        }
        this.formData.form.cityName = ''
      },
      initData(){
          this.formData.form.reportName = ""
          this.formData.form.year = ""
          this.formData.form.cityName = ""
          this.formData.form.cityCode = ""
          this.formData.form.targetNo = ""
          this.formData.form.targetName = ""
          this.formData.form.file = []
          this.formData2.form.reportContent = "",
          this.formData2.form.remark = ""
      },
      submitFormat(){
        this.formData.form.file = JSON.stringify(this.formData.form.file)
      },
      loadFormat(){
        this.formData.form.file  = this.formData.form.file ? JSON.parse(this.formData.form.file) :[]
      },
      sure(){
        console.log('sure===',this.formData.form)
        // this.$refs.vformComponents.$refs.form.validate().then(res=>{
        //   this.$refs.vformComponents2.$refs.form.validate().then(res2=>{
        //     this.submitFormat()
        //     if(this.openType == "add"){
        //       this.add()
        //     }else{
        //       this.update()
        //     }
        //   })
        // })
         this.submitFormat()
            if(this.openType == "add"){
              this.add()
            }else{
              this.update()
            }
      },
      add(){
        this.formData.form.id = null
        let params = {
          ...this.formData.form,
          ...this.formData2.form
        }
        cityPolicyMakeAdd(params).then(res=>{
          if(res.code==200){
            this.$message({
              message: this.$t('tips.createSuccess'),
              type: 'success'
            })
            this.closeSuccess()
          }else{
            this.$message({
              message: this.$t('tips.systemException'),
              type: 'error'
            })
          }
        })
      },
      update(){
        let params = {
          ...this.formData.form,
          ...this.formData2.form
        }
        cityPolicyMakeUpdate(params).then(res=>{
          if(res.code==200){
            this.$message({
              message: this.$t('tips.updateSuccess'),
              type: 'success'
            })
            this.closeSuccess()
          }else{
            this.$message({
              message: this.$t('tips.systemException'),
              type: 'error'
            })
          }
        })
      },
      cancel(){
        this.close()
      },
      handleClose(done) {
        done()
        this.close()
      },
      closeSuccess(){
        this.initData()
        // this.$refs.vformComponents.$refs.form.resetFields();
        // this.$refs.vformComponents2.$refs.form.resetFields();
        this.$emit('success')
      },
      close(){
        this.initData()
        // this.$refs.vformComponents.$refs.form.resetFields();
        // this.$refs.vformComponents2.$refs.form.resetFields();
        this.$emit('close')
      },
      getData(){
        // 获取字典值
        if(this.openType!="add"){
          cityPolicyMakeDetail(this.id).then(res=>{
            if(res.code==200){
              this.formData.form = res.data
              this.formData2.form = res.data
              this.loadFormat()
            }else{
              this.$message({
                message: this.$t('tips.systemException'),
                type: 'error'
              })
            }
          })
        }
      },
    },
  };
</script>

<style lang="scss" scoped>

</style>
